<template>
  <view class="page">
      <u-navbar autoBack fixed placeholder bgColor="#ffffff">
        <template #left>
          <view class="navBar">
            <text class="nav_title">舒城文创</text>
          </view>
        </template>
      </u-navbar>
      <scroll-view
        scroll-y
        refresher-enabled
        @refresherrefresh="onRefresh"
        :refresher-triggered="triggered"
        class="content"
        :style="{ height: '90vh' }"
      >
        <view class="title">
          <view class="left">
            <view></view>
            <text>特色伴手礼</text>
          </view>
          <view class="right">彰显舒城县风韵</view>
        </view>
        <u-empty
          v-if="!cultureList.length"
          mode="data"
          icon="http://cdn.uviewui.com/uview/empty/data.png"
        >
        </u-empty>
        <view v-else class="list">
          <view v-for="(item, index) in cultureList" :key="index" class="item" :style="{ width: (item.column * 33.3) + '%', height: (item.row * 54) + 'px' }">
            <image :src="item.merchandiseHeadImg" @click="toDetail(item.id)"></image>
          </view>
        </view>
      </scroll-view>
		<tabs :current="3" />
  </view>
</template>
<script>
import {merchandiseList} from "@/api/culture";

export default {
  onLoad() {
    this.getCultureList()
  },
  data() {
    return {
      triggered: false,
      cultureList: []
    };
  },
  computed: {
    navBarHeight() {
      const platform = uni.getSystemInfoSync().platform
      const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
      let navHeight = 0
      if (['ios', 'devtools'].includes(platform)) {
        navHeight = 44
      } else {
        navHeight = 48
      }
      return navHeight + statusBarHeight
    },
  },
  onPullDownRefresh() {
    this.onRefresh();
  },
  methods: {
    async getCultureList() {
      const { code, data, msg } = await merchandiseList()
      if (code !== 200) {
        this.$modal.msgError(msg)
        return
      }
      this.cultureList = data.rows.filter(item => item.merchandiseHeadImg.includes('http')).map((item, index) => {
        if (index === 0) {
          item.column = 2
          item.row = 3
        } else if ([1, 2, 3].includes(index)) {
          item.column = 1
          item.row = 1
        } else if ([4, 5, 6, 7].includes(index)) {
          item.column = 1
          item.row = 2
        } else if (index === 8) {
          item.column = 2
          item.row = 2
        } else {
          item.column = 1
          item.row = 2
        }
        return item
      })
    },
    toDetail(id) {
      uni.navigateTo({
        url: '/pages/culturalCreative/pages/detail?id=' + id
      })
    },
    async onRefresh() {
      this.triggered = true;
      await this.getCultureList()
      this.triggered = false;
    }
  },
};
</script>

<style lang="scss">
.page {
  width: 100vw;
  height: 100vh;
  padding: 0 4px;
  box-sizing: border-box;
  .navBar {
    display: flex;
    align-items: center;
    .nav_title {
      font-size: 36rpx;
      font-weight: 400;
      color: #000000;
      margin-left: 8rpx;
    }
  }
  .head-img {
    padding: 0 4px;
    box-sizing: border-box;
    image {
      width: 100%;
      height: 152px;
      border-radius: 8px;
    }
  }
  .title {
    padding: 18px 0;
    display: flex;
    align-items: flex-end;
    .left {
      display: flex;
      align-items: center;
      view {
        width: 6px;
        height: 24px;
        background: #0E9589;
        border-radius: 6px;
      }
      text {
        margin-left: 7px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #3D3D3D;
        line-height: 25px;
        text-align: left;
        font-style: normal;
      }
    }
    .right {
      margin-left: 10px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #3D3D3D;
      line-height: 16px;
      text-align: center;
      font-style: normal;
    }
  }
  .list {
    width: 100%;
    .item {
      float: left;
      float-wrap: wrap;
      padding: 4px;
      box-sizing: border-box;
      image {
        border-radius: 8px;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
